<!DOCTYPE html>
<head>
  <script src="/resources/testharness.js"></script>
  <!-- testharnessreport.js is loaded dynamically in the parent only -->
  <script src="/webxr/resources/webxr_util.js"></script>
  <script src="/webxr/resources/webxr_test_constants.js"></script>
  <script src="/webxr/resources/webxr_test_asserts.js"></script>
</head>
<body>
  <script>

const fakeDeviceInitParams = {
  supportedModes: ["immersive-ar"],
  views: VALID_VIEWS,
  viewerOrigin: IDENTITY_TRANSFORM,
  supportedFeatures: ALL_FEATURES,
  environmentBlendMode: "alpha-blend",
  interactionMode: "screen-space"
};

// Arbitrary message for notifying the parent frame
const FRAME_SESSION_COMPLETE = 'iframe done';

// This test runs inside the iframe, verifies that the session
// is working as expected, and sends a completion message to the parent.
const testBasicProperties = function(overlayElement, session,
                                   fakeDeviceController, t) {
  assert_equals(session.mode, 'immersive-ar');
  assert_not_equals(session.environmentBlendMode, 'opaque');

  assert_true(overlayElement != null);
  assert_true(overlayElement instanceof Element);

  // Verify that the DOM overlay type is one of the known types.
  assert_in_array(session.domOverlayState.type,
                  ["screen", "floating", "head-locked"]);

  // Verify SameObject property for domOverlayState
  assert_true(session.domOverlayState === session.domOverlayState);

  // The overlay element should have a transparent background.
  assert_equals(window.getComputedStyle(overlayElement).backgroundColor,
                'rgba(0, 0, 0, 0)');

  // Check that the pseudostyle is set.
  assert_equals(document.querySelector(':xr-overlay'), overlayElement);

  return new Promise((resolve) => {
    // Wait for a couple of animation frames to give the optional fullscreen
    // API integration test time to complete.
    session.requestAnimationFrame(() => {
      session.requestAnimationFrame(() => {
        resolve();
        parent.postMessage(FRAME_SESSION_COMPLETE, '*');
      });
    });
  });
};

const run_parent = () => {
  // Only the parent should use testharnessreport, load it dynamically.
  const script = document.createElement('script');
  script.src = '/resources/testharnessreport.js';
  script.async = false;
  document.head.append(script);

  const frame = document.createElement('iframe');

  // Optional test - if the WebXR DOM overlay is based on fullscreen
  // mode (it doesn't have to be), resulting in a fullscreen event,
  // check that the iframe has a transparent background.
  const testFullscreen = async_test("Wait for fullscreenchange");
  let gotFullscreenChange = false;
  const onFullscreenChange = testFullscreen.step_func_done(() => {
    gotFullscreenChange = true;
    // The iframe element should have the :xr-overlay pseudostyle
    // and a transparent background.
    assert_equals(document.querySelector(':xr-overlay'), frame);
    assert_equals(window.getComputedStyle(frame).backgroundColor,
                  'rgba(0, 0, 0, 0)');
  });
  document.addEventListener('fullscreenchange', onFullscreenChange);

  // For the iframe, load the current file from an alternate domain.
  frame.src = 'https://{{hosts[alt][www]}}:{{ports[https][1]}}' +
    document.location.pathname;
  frame.allow = 'xr-spatial-tracking; fullscreen';
  document.body.appendChild(frame);

  window.addEventListener('message', function(ev) {
    if (ev.data == FRAME_SESSION_COMPLETE) {
      // If there was no fullscreen change event, mark the optional
      // fullscreen integration test as a failed optional test, reported
      // as NOTRUN by the framework.
      if (!gotFullscreenChange) {
        testFullscreen.step(() => {
          assert_implements_optional(
            false, 'WebXR DOM overlay is not using fullscreen events');
          testFullscreen.done();
        });
      }
    }
  });

  // Add the child tests to the overall test suite, reporting results from them
  // as part of the overall test result. Note that this call does not wait for
  // these tests to complete, it just adds them to the list of pending tests.
  fetch_tests_from_window(frame.contentWindow);
};

const run_iframe_child = () => {
  xr_session_promise_test(
    "DOM Overlay in iframe",
    testBasicProperties.bind(this, document.body),
    fakeDeviceInitParams, 'immersive-ar',
    {requiredFeatures: ['dom-overlay'],
     domOverlay: { root: document.body } });
};

if (parent === self) {
  run_parent();
} else {
  run_iframe_child();
}

  </script>
</body>
